<!DOCTYPE html>
<html class="no-js" lang="zxx">

<head>
    <!-- Basic metas
    ======================================== -->
    <meta charset="utf-8">
    <meta name="author" content="">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <!-- Mobile specific metas
    ======================================== -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta property="og:title" content="Documentation">
    <meta property="og:url" content="index.html">
    <!-- Page Title
    ======================================== -->
    <title>Addina - Multipurpose eCommerce HTML Template</title>
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.png">
    <!-- fonts
	======================================== -->
    <link rel="stylesheet" type="text/css" href="assets/css/elegantFont.css">
    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="assets/css/vendor/bootstrap.min.css">
    <!-- Custom css -->
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <link rel="stylesheet" type="text/css" href="assets/css/responsive.css">
</head>

<body>
    <!--[if lte IE 9]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
	<![endif]-->
    <!-- Header starts -->
    <a href="#top" class="back-to-top">
        <i class="fal fa-arrow-up"></i>
    </a>
    <header class="page-header sticky-top" id="top">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-3 col-md-4 col-sm-6 col-6">
                    <div class="logo">
                        <a href="#" class="nav-brand">
                            <img src="assets/images/logo.png" alt="logo" width="155" height="36">
                        </a>
                    </div>
                </div>
                <div class="col-lg-9 col-md-8 col-sm-6 col-6">
                    <div class="right-part d-flex justify-content-end align-items-center">
                        <form action="#" class="search-form d-none d-lg-block">
                            <div class="input-group">
                                <input type="text" class="search-input" placeholder="Search item">
                            </div>
                        </form>
                        <div class="nav-list">
                            <a class="e-btn d-none d-md-inline-block"
                                href="Http://www.bootstrapmb.com" target="_blank">Request
                                support</a>
                            <a href="#" class="toggle-navbar">
                                <i class="icon_menu"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End of .container -->
    </header>
    <div class="main-content-wrapper">
        <div class="container ">
            <div class="row doc-container">
                <div class="col-xl-3">
                    <aside class="sidebar-navigation sticky-top doc-sidebar">
                        <h3>Doc Navigation</h3>
                        <!-- <nav class="nav">						 -->
                        <ul class="tmain-doc-nav  nav-sidebar doc-nav">
                            <li class="nav-item">
                                <a class="nav-link" href="#getting_started">
                                    <img src="assets/images/icon/start-button.png"> Getting Started
                                </a>
                                <span class="icon">
                                    <i class="icon_plus"></i>
                                    <i class="icon_minus-06"></i>
                                </span>
                                <ul class="submenu dropdown_nav">
                                    <li class="nav-item">
                                        <a class="nav-link" href="#introduction">Introduction</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#what_included">What's Included</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#template">
                                    <img src="assets/images/icon/hierarchical-structure.png"> Template Structures
                                </a>
                                <span class="icon">
                                    <i class="icon_plus"></i>
                                    <i class="icon_minus-06"></i>
                                </span>
                                <ul class="submenu dropdown_nav">
                                    <li class="nav-item">
                                        <a class="nav-link" href="#html">HTML Structure</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#css">CSS Files and Structure</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#javascript">Javascript Files</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#change_content">
                                    <img src="assets/images/icon/writer.png"> Change Contents
                                </a>
                                <span class="icon">
                                    <i class="icon_plus"></i>
                                    <i class="icon_minus-06"></i>
                                </span>
                                <ul class="submenu dropdown_nav">
                                    <li class="sub-nav nav-item ">
                                        <a class="nav-link" href="#change_img">Changing Images</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#change_logo">Changing Brand Logo</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#change_color">Changing Colors</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#source">
                                    <img src="assets/images/icon/love-letter.png">Sources and Credits
                                </a>
                            </li>
                        
                        </ul>
                        <!-- </nav> -->
                    </aside>
                </div>
                <div class="col-xl-9 col-lg-12">
                    <div class="main-content">
                        <main class="main">
                            <div class="filterable-wrapper">
                                <article id="getting_started" class="section-main doc-section">
                                    <div class="steps-panel">
                                        <ol class="ordered-list">
                                            <li>
                                                <strong>Item Name :</strong>
                                                Addina - Multipurpose eCommerce HTML Template
                                            </li>
                                            <li>
                                                <strong>Created:</strong>
                                                05 February, 2024
                                            </li>
                                            <li>
                                                <strong>Item Version :</strong> v 1.0.0
                                            </li>
                                            <li>
                                                <strong>Author :</strong>
                                                <a href="Http://www.bootstrapmb.com"
                                                    target="_blank">Gramentheme</a>
                                            </li>
                                        </ol>
                                    </div>
                                    <figure>
                                        <img class="max-100" src="assets/images/07.jpg" alt="image">
                                    </figure>
                                    <section id="introduction">
                                        <h2>Introduction</h2>
                                        <h4 class="title">Addina - Multipurpose eCommerce HTML Template</h4>
                                        <div class="top-support">For any support please don't hesitate to contact us at
                                            <a href="https://themeforest.net/user/creationic">
                                                <b>Support Center</b>
                                            </a>. We provide 13 hours real-time support for our customers.
                                        </div>
                                        <p>We would like to thank you for choosing Addina - Multipurpose eCommerce HTML
                                            Template
                                        </p>
                                    </section>
                                    <!-- End of #getting_started -->
                                    <section id="requirements">
                                        <h3>Getting started</h3>
                                        <p>Addina is a modern Responsive Multi-Purpose Multi-Page bootstrap 5 template.
                                        </p>
                                        <h4>Template Features</h4>
                                        <div class="steps-panel">
                                            <ul class="ordered-list">
                                                <li>HTML5 &amp; CSS3</li>
                                                <li>Bootstrap v5.x</li>
                                                <li>Font-awesome</li>
                                                <li>Custom Icon</li>
                                                <li>jQuery</li>
                                                <li>05 Awesome Homepage</li>
                                                <li>Responsive Design</li>
                                                <li>Pixel Perfect Design</li>
                                                <li>Clean Code &amp; Unique Design</li>
                                                <li>Easy to Customize</li>
                                                <li>W3C Validated Codes</li>
                                            </ul>
                                        </div>
                                    </section>
                                    <!-- End of #requirements -->
                                    <section id="what_included">
                                        <h3>What's Included</h3>
                                        <p>
                                            After purchasing Addina template on themeforest.net with your Envato
                                            account, go to your
                                            Download page. You can choose to download Addina template package which
                                            contains the following files:
                                        </p>
                                        <h4>The contents of the template package downloaded from ThemeForest</h4>
                                        <div class="steps-panel">
                                            <ul class="ordered-list">
                                                <li>
                                                    <strong>main-file</strong> - An HTML Template file. this file you
                                                    can edit and use for your business.
                                                </li>
                                                <li>
                                                    <strong>documentation</strong> - This folder contains what you are
                                                    reading now :)
                                                </li>
                                            </ul>
                                        </div>
                                    </section>
                                    <!-- End of #what_included -->
                                </article>
                                <article id="template" class="section-main doc-section">
                                    <section>
                                        <h2>Template Structures</h2>
                                        <h3>Articles</h3>
                                        <ul class="list-unstyled article_list tag_list">
                                            <li>
                                                <a href="#html">
                                                    <i class="icon_document_alt"></i>HTML Structure
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#css">
                                                    <i class="icon_document_alt"></i>CSS Files and Structure
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#javascript">
                                                    <i class="icon_document_alt"></i>JavaScript Files
                                                </a>
                                            </li>
                                        </ul>
                                    </section>
                                    <!-- End of #installation -->
                                    <section id="html">
                                        <h3>HTML Structure</h3>
                                        <p>This template is a fixed layout with four columns. The main contents are
                                            inside the 'body' tag divided into different section (i.e. header, banner,
                                            services,... footer etc.). The general template structure is the same
                                            throughout the template. Here is the general structure.</p>
                                        <figure>
                                            <img src="assets/images/02.jpg" alt="3.1.1" class="doc-image">
                                            <figcaption class="text-center">HTML Markup Structure</figcaption>
                                        </figure>
                                    </section>
                                    <!-- End of #installation -->
                                    <section id="css">
                                        <h3>CSS Files and Structure</h3>
                                        <p>We are using one customed CSS files (main.css) and several vendor css files.
                                            CSS file structure is as follows:</p>
                                        <figure>
                                            <img src="assets/images/01.jpg" alt="3.1.1" class="doc-image">
                                            <figcaption class="text-center">CSS Files and Structure</figcaption>
                                        </figure>
                                    </section>
                                    <!-- End of #using_theme_uploader -->
                                    <section id="javascript">
                                        <h3>JavaScript Files</h3>
                                        <p>There is a custom .js file named main.js and are several vendor js files as
                                            plugins. We are using jQuery(a javascript library) instead of vanilla
                                            javascript. Our file structure is a follows:</p>
                                        <figure>
                                            <img src="assets/images/03.jpg" alt="3.1.1" class="doc-image">
                                            <figcaption class="text-center">JavaScript Files</figcaption>
                                        </figure>
                                    </section>
                                    <!-- End of #using_ftp_uploader -->
                                </article>
                                <article id="change_content" class="section-main doc-section">
                                    <section>
                                        <h2>Change Contents</h2>
                                        <ul class="list-unstyled article_list tag_list">
                                            <li>
                                                <a href="#change_img">
                                                    <i class="icon_document_alt"></i>
                                                    Changing
                                                    Images
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#bran_logo">
                                                    <i class="icon_document_alt"></i>Changing Brand Logo
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#change_color">
                                                    <i class="icon_document_alt"></i>Changing Colors
                                                </a>
                                            </li>
                                        </ul>
                                    </section>
                                    <!-- End of #section-4 -->
                                    <section id="change_img">
                                        <h3>Changing Images</h3>
                                        <p>To change any images of the website</p>
                                        <div class="steps-panel">
                                            <ol class="ordered-list">
                                                <li>
                                                    Carefully collect the source name of the image (i.e. hero.jpg)
                                                </li>
                                                <li>Open the file called images.</li>
                                                <li>Find the particular image file.</li>
                                                <li>Replace the file with your image.</li>
                                                <li>
                                                    Make sure that the file name does not change.The file name should be
                                                    the same.
                                                </li>
                                            </ol>
                                        </div>
                                        <p>
                                            <strong>Example:</strong>
                                            Suppose you want to change the following image
                                            file:
                                        </p>
                                        <figure>
                                            <img src="assets/images/05.jpg" alt="4.1.1" class="doc-image">
                                        </figure>
                                        <h4>You have to do the following to change this image with your own image:</h4>
                                        <div class="steps-panel">
                                            <ol class="ordered-list">
                                                <li>Open the file called images.</li>
                                                <li>Find the particular image file called banner-img.jpg</li>
                                                <li>Replace the file with your image</li>
                                                <li>Make sure that the file name does not change.</li>
                                            </ol>
                                        </div>
                                        <div class="alert media message_alert alert-danger fade show" role="alert">
                                            <i class="icon_close_alt2"></i>
                                            <div class="media-body">
                                                <h5>Note</h5>
                                                <p>Images seen in the live preview are only set for preview purposes.
                                                    They are not included in the download files.</p>
                                            </div>
                                        </div>
                                    </section>
                                    <section id="bran_logo">
                                        <h3>Changing Brand Logo</h3>
                                        <p>To change any images of the website</p>
                                        <div class="steps-panel">
                                            <ol class="ordered-list">
                                                <li>
                                                    Carefully collect the source name of the image (i.e.
                                                    banner-img.jpg)
                                                </li>
                                                <li>Open the file called images.</li>
                                                <li>Find the particular image file.</li>
                                                <li>Replace the file with your image.</li>
                                                <li>
                                                    Make sure that the file name does not change.The file name
                                                    should be the same.
                                                </li>
                                            </ol>
                                        </div>
                                        <p>
                                            <strong>Example:</strong>
                                            Suppose you want to change the following
                                            image file for change your logo:
                                        </p>
                                        <figure>
                                            <img src="assets/images/04.jpg" alt="4.1.1" class="doc-image">
                                        </figure>
                                    </section>
                                    <!-- End of #section-4 -->
                                    <section id="change_color">
                                        <h3>Changing Colors</h3>
                                        <p>We have used
                                            <strong style="color: #f81f01;">scss</strong>
                                            for this project to write css. If
                                            you are familiar with
                                            <strong style="color: #f81f01;">scss</strong>
                                            you should customize
                                            only the
                                            <strong style="color: #f81f01;">.scss</strong>
                                            files. Please make sure you compile
                                            the
                                            <strong style="color: #f81f01;">main.scss</strong>
                                            file after you have made changes in
                                            any of the
                                            <strong style="color: #f81f01;">.scss</strong> files.
                                        </p>
                                        <ul class="list-unstyled article_list tag_list rn-list">
                                            <li>
                                                <a href="#changedefaultcolor">
                                                    Changing default template
                                                    colors
                                                </a>
                                            </li>
                                        </ul>
                                        <h3>Changing default template colors</h3>
                                        <div class="steps-panel">
                                            <ol class="ordered-list">
                                                <li>Open the
                                                    <strong>variable.scss</strong> file from
                                                    <strong>
                                                        assets &gt; scss &gt;
                                                        abstracts &gt; _variables.scss
                                                    </strong> folder with a text-editor.
                                                </li>
                                                <li>
                                                    Change the right-side values of the variables to change any default
                                                    colors of your
                                                    site.
                                                </li>
                                                <li>Save your file.</li>
                                            </ol>
                                        </div>
                                        <figure>
                                            <img src="assets/images/06.jpg" alt="4.1.1" class="doc-image">
                                        </figure>
                                    </section>
                                </article>
                                <article id="source" class="section-main doc-section">
                                    <section id="section-4-3">
                                        <h3>Sources and Credits</h3>
                                        <ul class=" single_list">
                                            <li>
                                                <a target="_blank" href="https://fonts.google.com/">Google Fonts</a>
                                            </li>
                                            <li>
                                                <a target="_blank" href="https://jquery.com/">jQuery</a>
                                            </li>
                                            <li>
                                                <a target="_blank" href="https://getbootstrap.com/">Bootstrap</a>
                                            </li>
                                            <li>
                                                <a target="_blank"
                                                    href="https://github.com/hernansartorio/jquery-nice-select">Nice
                                                    Select</a>
                                            </li>
                                            <li>
                                                <a target="_blank" href="https://github.com/kenwheeler/slick/">Slick
                                                    Slider</a>
                                            </li>
                                            <li>
                                                <a target="_blank"
                                                    href="https://github.com/dimsemenov/Magnific-Popup">Magnific
                                                    Popup</a>
                                            </li>
                                        </ul>
                                    </section>
                                </article>
                                 
                                <!-- End of #getting_started1-4 -->
                            </div>
                            <!-- End of .filterable-wrapper -->
                        </main>
                    </div>
                </div>
            </div>
            <!-- End of .main-content -->
        </div>
        <!-- End of .container -->
    </div>
    <!-- End of .main-content -->
    <footer class="tp-footer">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <div class="page-footer">
                        <p>Copyright © 2024 Addina All Rights Reserved.</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="social-footer text-md-right">
                        <a href="index.html">
                            <i class="social_youtube"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- End of .page-footer -->
    <!-- Javascripts
		======================================= -->
    <!-- jQuery -->
    <script src="assets/js/vendor/jquery.min.js"></script>
    <script src="assets/js/vendor/jquery-migrate.min.js"></script>
    <script src="assets/js/vendor/bootstrap.bundle.min.js"></script>
    <!-- jQuery Easing Plugin -->
    <script src="assets/js/vendor/easing-1.3.js"></script>
    <!-- Custom Script -->
    <script src="assets/js/onpage-menu.js"></script>
    <script src="assets/js/main.js"></script>
</body>

</html>